// --save-dev || -D 开发依赖(辅助)
// --save || -S     运行依赖(发布)

// node --version 查看 node.js 版本
// 全局安装 gulp    
// npm install --global gulp
// npm --version    查看 npm 版本

//  全局安装完 gulp 之后, 还需要在每个要使用的 gulp 项目中都单独安装一次
// npm install --save-dev gulp
// 导入 gulp 模块
const gulp = require("gulp");


// 要导入的 SASS 模块 开始
// 打包sass         npm install --save-dev sass gulp-sass
// 打包 css         npm install --sava-dev gulp-cssmin
// 文件重命名       npm install --save-dev gulp-rename
const sass = require("gulp-sass")(require("sass"));
const cssmin = require("gulp-cssmin");
const rename = require("gulp-rename");
const connect = require("gulp-connect");
const open = require("open");
const uglify = require('gulp-uglify');
const babel = require("gulp-babel");
const htmlmin = require("gulp-htmlmin");


// 要导入的 SASS 模块 结束
// 专门处理 SASS 源码的任务
function taskScss(cb) {
    gulp.src("src/scss/**")
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest("./dist/css"))
        .pipe(connect.reload());
    cb();
}




// 要导入的 js 模块 开始
// 打包 js          npm install --save-dev gulp-uglify
// 打包 ES6语法为 ES5   
// npm install --save-dev gulp-babel@7.0.1
// npm install --save-dev babel-core
// npm install --save-dev babel-preset-es2015


// 要导入的 js 模块 结束
// 专门处理 JS 的任务
function taskJs(cb) {
    gulp.src("src/js/**")
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload());
    cb();
}




// 要导入的 html 模块 开始
// 打包html        npm install --save-dev gulp-htmlmin
// 清除目录        npm install --save-dev gulp-clean
// 要导入的 html 模块 结束
// 处理 html 压缩的任务
function taskHtml(cb) {
    gulp.src('src/pages/**')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/pages'))
        .pipe(connect.reload());
    cb();
}





// 要导入的 静态资源 模块 开始
// 要导入的 静态资源 模块 结束
// 处理 静态资源 任务
function taskStatic(cb) {
    gulp.src("src/static/**")
        .pipe(gulp.dest('dist/static'));
    cb();
}




// 要导入的 自动打开浏览器 模块 开始
// 自动打开浏览器   npm install --save-dev gulp-webserver
// 或者
// npm install --save-dev gulp-connect
// npm install --save-dev open


// 要导入的 自动打开浏览器 模块 结束


// 处理 自动打开浏览器 的任务
function taskOpen(cb) {
    connect.server({
        port: 8080,
        root: 'dist',
        livereload: true
    });

    open('http://127.0.0.1:8080/pages/index.html');
    gulp.watch("src/scss/**", taskScss)
    gulp.watch("src/js/**", taskJs);
    gulp.watch("src/pages/**", taskHtml);
    cb();
}



// 导出任务
// taskScss ok
// taskJs  ok
// taskStatic   ok
exports.default = gulp.series(taskScss, taskJs, taskHtml, taskStatic, taskOpen);